<script setup>
import { ElMessage } from 'element-plus'
import {addUser, getUser, getUserInfo, updateUser} from '@/api/user'
import { alterUserDetail, getUserDetail } from '@/api/system/admin'
import { resetData } from '@/hooks/use-common'

const formRules = useElement().formRules
/** 提交按钮 */
const userRef = ref('')
const open = ref(false)
const title = ref('新增用户')
const emits = defineEmits([])
const addEditForm = reactive({
  create_at: "",
  email: "",
  id: 0,
  name: "",
  phone: "",
  role: 2,
  update_at: "",
  username: "",
})

const formString = JSON.stringify(addEditForm)

const submitForm = () => {
  userRef.value.validate((valid) => {
    if (valid) {
      if (addEditForm.userId) {
        alterUserDetail(addEditForm).then(() => {
          ElMessage({ message: '修改成功', type: 'success' })
          open.value = false
          emits('getList')
        })
      } else {
        addUser(addEditForm).then(() => {
          ElMessage({ message: '新增成功', type: 'success' })
          open.value = false
          emits('getList')
        })
      }
    }
  })
}

/** 取消按钮 */
const cancel = () => {
  open.value = false
  resetData(addEditForm, formString)
}

const showModal = (row) => {
  if (row.userId) {
    getUserDetail(row.userId).then(({ data }) => {
      title.value = '用户详情'
      reshowData(addEditForm, data)
    })
  } else {
    title.value = '新增用户'
    addEditForm.password = ''
  }
  open.value = true
}

const reshowData = (addEditForm, detailData) => {
  Object.keys(addEditForm).forEach((fItem) => {
    if (detailData[fItem]) {
      addEditForm[fItem] = detailData[fItem]
    }
  })
}

onMounted(() => {})
//导出给refs使用
defineExpose({ showModal })
</script>

<template>
  <!-- 添加或修改用户配置对话框 -->
  <el-dialog
    v-model="open"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :title="title"
    width="650px"
    append-to-body
  >
    <el-form ref="userRef" :model="addEditForm" label-width="100px" inline disabled>
      <el-form-item label="用户ID" prop="id" readonly>
        <el-input v-model="addEditForm.id" readonly style="width: 150px" />
      </el-form-item>
      <el-form-item label="用户昵称" prop="name">
        <el-input v-model="addEditForm.name" readonly style="width: 150px" placeholder="用户昵称" />
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="addEditForm.username" readonly style="width: 150px" placeholder="用户昵称" />
      </el-form-item>
      <el-form-item label="手机号码" prop="phone" >
        <el-input v-model="addEditForm.phone" readonly style="width: 150px" placeholder="手机号码" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="addEditForm.email" readonly style="width: 150px" placeholder="邮箱" />
      </el-form-item>
      <el-form-item label="创建时间" prop="create_at">
        <el-input v-model="addEditForm.create_at" readonly style="width: 150px" placeholder="邮箱" />
      </el-form-item>
      <el-form-item label="更新时间" prop="update_at">
        <el-input v-model="addEditForm.update_at" readonly style="width: 150px" placeholder="邮箱" />
      </el-form-item>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="open = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确认</el-button>
        </div>
      </template>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
